<template>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="index">
            <!--  tou -->
            <div class="index-1" >
                <div class="index-1-1" >
                    <div class="tou">
                        
                        欢迎：<span style="font-size:18px;font-weight: 800;background-image: linear-gradient(to right, #FF8C00, #FFDF00);
      -webkit-background-clip: text;
      color: transparent;">{{arr.userNick}}</span>  
                    </div>
                   
                    <div class="tou-3" @click="good()">
                        <van-icon name="shopping-cart-o" size="25" />
                        <br />
                        <span>购物</span>
                    </div>
                    <div @click="search()" class="tou-2">
                        <van-icon name="comment-o" size="25" />
                        <br />
                        <span>消息</span>
                    </div>
                </div>

                <div class="index-2">
                    <van-search  shape="round" background="#ebddca" v-model="searchInput" placeholder="请输入搜索关键词" @change="selevall"/>
                </div>

                <div class="index-3">

                    <div class="index-3-1"><img style="font-size: 2px;" src="../assets/s.svg" alt="" /><span>官方保障</span></div>

                    <div class="index-3-1"><img style="font-size: 2px;" src="../assets/s1.svg" alt="" /><span>认证商家</span></div>

                    <div class="index-3-1"><img style="font-size: 2px;" src="../assets/s2.svg" alt="" /><span>收费透明</span></div>

                </div>
            </div>
            <!-- 总 -->
            <div class="lun-1">
                <div class="lun-1-1">
                    <van-swipe :autoplay="3000">
                        <van-swipe-item v-for="str in list" :key="str.id">
                            <img v-lazy="str.proimg" width="100%" height="200px" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="lun-1-2">
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item>
                            <h3>让你拥有天使的脸蛋,魔鬼的身材</h3>
                        </van-swipe-item>
                        <van-swipe-item>
                            <h3>王子会在门外等你</h3>
                        </van-swipe-item>
                    </van-swipe>
                </div>

                <!-- 秒杀 -->
                <div class="miao" @click="miao()">
                    <div class="miao-1"><span>限时秒杀</span></div>
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                    <div class="miao-3" v-for="obj in kill" :key="obj.id">
                        <img @click="xingq(arr)" :src="obj.proimg" width="70px" height="70px" class="miao-5">
                        <span class="miao-4">￥{{ obj.price}}</span>
                    </div>

                </div>
                <!--  -->
                <div class="bang">
                    <div class="bang-1"><img src="../assets/3.jpg" width="70px" height="70px" style="margin-left: 6%;margin-top: 20px;" alt=""></div>

                    <div class="bang-2">
                        <h3 class="bang-5">仙女榜单</h3>
                        <br>
                        <span class="bang-4">千万用户变美指南</span>
                    </div>
                    <div @click="ranking()" class="bang-3">查看榜单
                        <van-icon name="arrow" />
                    </div>
                </div>
                <!-- tuijian -->
                <!-- 推荐 -->
                <div class="wei">
                    <div class="wei-1"><span>全部商品</span></div>
                    <div class="wei-2" v-for="obj in list" :key="obj.id" @click="xiangqing(obj,arr)">
                        <img :src="obj.proimg" width="100%" height="172px">
                        <div class="wei-4">
                            <span style="font-size: 9px; margin:0px 7px; color:#f3fd9d;">11.11</span>
                        </div>
                        <span class="wei-5">品质险 &nbsp;&nbsp;&nbsp;假一赔十</span>
                        <h3 style="font-size: 15px; margin:5px 10px ;">{{ obj.definite}}</h3>
                        <h3 style="font-size: 20px; margin-left:10px; color:#a02c26;">￥{{ obj.price}}</h3>
                    </div>
                    <div class="wei-3">
                        <span style="margin-left: 40%; color:#a1a1a1">没有更多了~ ~ ~ </span>
                    </div>

                </div>
            </div>
        </div>
    </van-pull-refresh>

</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            searchInput:"",
            list: [],
            time: 30 * 60 * 60 * 1000,
            isLoading: false,
            list: "",
            kill: "",
            arr:""
        };
    },
    created() {
        this.pruduceFindAll();
        this.findSec();
       
         axios({
             
                url: "/api/user/selectUser",
                method: "GET",
                params:this.$route.params.user,
              
            }).then((res) => {
                  
                this.arr = res.data
                //直接取值
                this.arr=JSON.parse(localStorage.getItem('user'))
                console.log(this.arr);
            });
    },
    methods: {
        selevall(){
            this.definite = this.searchInput,
            this.pruduceFindAll();//初始化查询
        },

      xiangqing(obj,arr){
                this.$router.push({ path: '/xingq' + "", query: { id: obj.id,userId:this.arr.userId } }) //带参跳转
      },
        //后台拿商品轮播图
        pruduceFindAll() {
            axios({
                url: "/api/product/getallget",
                method: "GET",
                params:{
                    definite:this.definite,
                }
            }).then((res) => {
                this.list = res.data
                console.log(this.list);
            });
        },
        findSec() {
            var data = new Date();
            var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
            var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
            // this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
            // console.log(this.addForm.enter_date)
            var aaa = data.getFullYear() + "-" + month + "-" + date;
            var bbb = aaa.substring(0, 10);
            axios({
                url: "/api/second/findSecfour",  //?startDate
                method: "GET",
            }).then((res) => {
                this.kill = res.data
            });
        },
        //跳转秒杀
        miao(){this.$router.push({ path: "/miao" })},
        // //跳转详情
        // xingq(arr) {
        //     this.$router.push({ path: "/xingq",params:{userId:arr.userId} })
        // },
        // 跳转排行榜
        ranking() {
            this.$router.push({ path: "/ranking" });
        },
        // 进行下拉刷新功能
        onRefresh() {
            setTimeout(() => {
                Toast("刷新成功");
                this.isLoading = false;
                this.count++;
            }, 1000);
        },
        // 跳转购物车
        good() {
            this.$router.push({ path: "/good" });
        },
        search() {
            this.$router.push({ path: "/search" });
        },
    },
};
</script>

<style>
.miao-3 {
    width: 85px;
    height: 110px;
    margin-left: 8px;
    float: left;
}

.miao-4 {
    float: left;
    margin-top: 80px;
    margin-left: -60px;
    color: #a02c26;
}
.miao-5 {
    float: left;
    margin-left: 5%;
    margin-top: 10px;
}

.dao {
    width: 20%;
    height: 30px;
    background-color: #ccac88;
    float: left;
    margin-top: -90%;
    border-radius: 5px;
    margin-left: 3%;
}
.wei-3 {
    float: left;
    width: 100%;
    height: 230px;
    /* background-color: #ccac88; */
}
.wei-4 {
    width: 47px;
    height: 16px;
    background-color: #a02c26;
    margin-top: 5px;
    margin-left: 10px;
    border-radius: 5px;
}
.wei-5 {
    float: left;
    font-size: 9px;
    margin-left: 70px;
    margin-top: -15px;
    color: #9c9c9c;
}

.wei-2 {
    width: 47%;
    height: auto;
    background-color: #f5f5f5;
    float: left;
    margin-top: 10px;
    margin-left: 2%;
    border-radius: 10px;
    cursor: pointer;
}
.wei-3 {
    width: 100%;
    height: 80px;
    float: left;
    margin-top: 10px;
    cursor: pointer;
}
.wei-1 {
    font-size: 30px;
    width: 100%;
    background-color: #fff;
    margin-left: 10px;
}
.wei {
    width: 100%;
    height: 200%;
    float: left;
    margin-top: 20px;
}

.bang-3 {
    width: 90px;
    height: 30px;
    float: right;
    margin-top: -22%;
    border-radius: 30px;
    background-color: #ccac88;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 10px;
    margin-right: 20px;
}
.bang-2 {
    float: left;
    width: 200px;
    height: 130px;
    /* background-color: aqua; */
    line-height: 70px;
    font-size: 15px;
    color: #ccac88;
    margin-left: 20px;
}
.bang-5 {
    float: left;
    font-size: 18px;
    color: black;
    margin-top: 0px;
}
.bang-4 {
    float: left;
    font-size: 14px;
    color: #a1a1a1;
    margin-left: -70px;
    margin-top: -20px;
}
.bang-1 {
    float: left;
    margin-left: 10px;
}
.bang {
    width: 100%;
    height: 110px;
    float: left;
    background-color: #fbfaf9;
    margin-top: 18px;
    border-radius: 30px;
    margin-left: 1%;
}

.miao-1 {
    height: 20px;
    float: left;
    font-size: 25px;
    margin-left: 10px;
}

/* 限时 */
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}
.block {
    margin-left: 8px;
    margin-top: 6px;
    display: inline-block;
    width: 5%;
    height: 20%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #ee0a24;
}
.miao {
    width: 100%;
    height: 22%;
    float: left;
    background-color: #fbfaf9;
    margin-top: 4%;
    border-radius: 30px;
}
.lun-1-2 {
    width: 100%;
    height: 12%;
    background-color: #dce7de;
    float: left;
    margin-top: 20px;
}
/*lunbotu  */
.my-swipe .van-swipe-item {
    color: #ccac88;
    font-size: 20px;
    line-height: 90px;
    text-align: center;
    /* background-color: #39a9ed; */
}

.lun-1 {
    width: 100%;
    height: auto;
    background-color: white;
    float: left;
    border-radius: 40px;
}
.index-3-1 {
    float: left;
    margin-left: 1%;
    line-height: 50px;
    font-size: 10px;
    display: flex;
}
.index-3 img {
    margin-left: 30px;
    width: 18%;
}
.index-3 {
    width: 100%;
    height: 50px;
    float: left;
    margin-top: 20px;
    font-size: 30%;
    color: rgba(132, 117, 98);
}
.index-2-3 {
    float: left;
    margin-left: 1%;
}
.index-2-2 {
    float: left;
    margin-top: 10px;
}
.index-2-1 {
    float: left;
    margin-left: 10px;
    margin-top: 5px;
}

/* .index-2 {
    width: 90%;
    height: 40px;
    float: left;
    background-color: transparent;
    border-radius: 20px;
    margin-left: 5%;
    margin-top: 20px;
    border: solid rgba(183, 138, 101, 1);
} */
.tou-3 {
    float: right;
    margin-top: 10px;
    margin-right: 15px;
     font-size: 10px;
}
.tou-2 {
    float: right;
    margin-right: 20px;
    margin-top: 10px;
    font-size: 10px;
}
.tou-1 {
    float: left;
    font-size: 2px;
    margin-left: 10px;
    margin-top: 10px;
}

.tou {
    float: left;
    margin-top: 5px;
    margin-left: 10px;
    /* color:#ffae00; */
}
.index-1-1 {
    width: 100%;
    height: 70px;

    float: left;
}

.index-1 {
    width: 100%;
    height: 200px;
    background-color: rgba(235, 221, 202);
    float: left;
}
.index {
    width: 100%;
    height: 100%;
    float: left;
}
</style>